<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no" />
		<title>找回密码</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style>
			body {
				background-color: #F3F3F3;
			}
			.aui-content {
				padding-top: 10%;
			}
			.aui-btn{
				padding: 8px 12px;
			}
			.aui-btn-info{
				background-color: #327AFA;
			}
			.aui-btn-block {
				margin-top: 5px;
				padding: 8px 0;
				font-size: 18px;
				margin: auto;
				width: 94%;
			}
			.aui-input-row {
				border-top: 0px solid #c8c7cc;
				margin-left: 10px;
			}
			.aui-input-row:first-child:after {
				border-top: 0px solid #c8c7cc;
			}
			.aui-btn-row:after {
				border-bottom: 0px solid #c8c7cc;
			}
			.aui-form{
				width: 85%;
				margin:auto;
			}
			.aui-input-addon{
				border-right: 1px solid #c8c7cc;
				padding-right: 10px !important;
			}
			.tips{
				padding-left: 3%;
				padding-bottom: 5%;
			}
			.star{
				color: #FD4F2A;
				float: left;
				height: 10px;
				line-height: 14px;
				padding-right: 1%;
			}
			.tips p{
				color: #686868;
				font-size: 12px;
			}

			#validate {
            	width: 48%;
            	padding:10px 6px;
       		}
		</style>
	</head>
	<body>
		<div class="aui-content">
			<div class="tips">
				<span class="star">*</span><p>您的手机<span id="usermobile">130********</span>会收到一条含有6位数字的验证码的短信</p>
			</div>
			<div class="aui-form aui-card">
				<div class="aui-input-row">
		            <label class="aui-input-addon">验证码</label>
		            <input type="number" id="validate" class="aui-input validate" placeholder="请输入验证码"/>

		            <div class="aui-btn vali" tapmode onclick="getVerify();" id="sendVerify">获取验证码</div>
		        </div>
			</div>
			<div class="aui-btn-row">
					<div class="aui-btn aui-btn-info aui-btn-block" tapmode onclick="confirm();">
						提交
					</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript">
		var isinerval, times;
		apiready = function() {
			api.parseTapmode();
			mobile = api.pageParam.mobile;		
			mobileshow = mobile.substring(0, 3) + "******" + mobile.substring(9, 11);
			var usermobile = $api.byId('usermobile');
			$api.text(usermobile,mobileshow);
		}
		
		function getVerify() {
            //发送验证码
            var url = 'register/verifyMobiled/mobile/' + mobile;
            // var data = {};或直接传'' unll
            var data = {};
            ajaxRequest(url, 'get', data, function(ret, err) {
                if (ret.status == 1) {
                    var sendVerify = $api.byId('sendVerify');
                    $api.removeAttr(sendVerify, 'onclick');
                    //提交成功前不可更改，防止用户发送后用其他号码注册 或者 在服务端验证
                    var readonly_mobile = $api.byId('mobile');
                    $api.attr(readonly_mobile, 'readOnly', 'true');
                    $api.html(sendVerify, '已发送(<span id="GetVerify">60</span>)');
                    times = 60;
                    isinerval = setInterval("CountDown()", 1000);
                } else {
                    api.toast({
                        msg : '短信发送失败',
                        duration : 2000,
                        location : 'bottom'
                    });
                }
            });

        }

        //登录
		function confirm() {
			var validate = $api.val($api.byId('validate'));
			url = 'register/verify/mobile/'+ mobile +'/verify/'+ validate;
			ajaxRequest(url, 'get', '', function(ret, err) {
				if (ret.status == '1') {
					api.openWin({
			            name : 'changePWD_win',
			            url : 'changePWD_win.html',
			            pageParam : {
							mobile : mobile
						},
			            reload : true,
			            delay : 300
			        });				
				} else {
					api.toast({
						msg : '请输入正确的验证码',
						duration : 2000,
						location : 'bottom'
					});
					return false;
				}
			});
		}

		function CountDown() {
            if (times < 1) {
                //提交成功前不可更改，防止用户发送后用其他号码注册 或者 在服务端验证
                var readonly_mobile = $api.byId('mobile');
                $api.removeAttr(readonly_mobile, 'readOnly');
                var sendVerify = $api.byId('sendVerify');
                $api.attr(sendVerify, 'onclick', 'getVerify()');
                $api.html(sendVerify, '重新获取');
                clearInterval(isinerval);
                return;
            }
            var getVerify = $api.byId('GetVerify');
            $api.html(getVerify, '' + times + '');
            times--;
        }

	</script>
</html>